<template>
	<div @mouseenter="inPopover = true" @mouseleave="inPopover = false">
		<el-popover
			placement="top"
			v-model:visible="visible"
			:width="width"
			trigger="contextmenu"
			class="popover-input"
			:teleported="teleported"
			:persistent="false"
			popper-class="!p-0"
		>
			<div class="flex p-3" @click.stop="">
				<div class="popover-input__input mr-[10px] flex-1">
					<el-select class="flex-1" :size="size" v-if="type == 'select'" v-model="inputValue" :teleported="teleported">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-input
						v-else
						v-model.trim="inputValue"
						:maxlength="maxlength"
						:show-word-limit="showLimit"
						:type="type"
						:size="size"
						clearable
						:placeholder="placeholder"
					/>
				</div>
				<div class="flex-none popover-input__btns">
					<el-button link @click="close">{{ $t('common.cancelButtonText') }}</el-button>
					<el-button type="primary" :size="size" @click="handleConfirm">{{ $t('common.confirmButtonText') }}</el-button>
				</div>
			</div>
			<template #reference>
				<div class="inline" @click.stop="handleOpen">
					<slot></slot>
				</div>
			</template>
		</el-popover>
	</div>
</template>

<script lang="ts" setup>
import { useEventListener } from '@vueuse/core';
import type { PropType } from 'vue';

const props = defineProps({
	modelValue: {
		type: String,
	},
	type: {
		type: String,
		default: 'text',
	},
	width: {
		type: [Number, String],
		default: '300px',
	},
	placeholder: String,
	disabled: {
		type: Boolean,
		default: false,
	},
	options: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	size: {
		type: String as PropType<'default' | 'small' | 'large'>,
		default: 'default',
	},
	limit: {
		type: Number,
		default: 200,
	},
  maxlength: {
    type: Number,
    default: 20,
  },
	showLimit: {
		type: Boolean,
		default: false,
	},
	teleported: {
		type: Boolean,
		default: true,
	},
});
const emit = defineEmits(['confirm', 'update:modelValue']);

const visible = ref(false);
const inPopover = ref(false);
const inputValue = ref();
const handleConfirm = () => {
	close();
	emit('confirm', inputValue.value);
	emit('update:modelValue', inputValue.value);
};

const handleOpen = () => {
	if (props.disabled) {
		return;
	}
	visible.value = true;
	inputValue.value = '';
};

const close = () => {
	visible.value = false;
};

watch(
	() => inputValue.value,
	(value) => {
		emit('update:modelValue', value);
	},
	{
		immediate: true,
	}
);

useEventListener(document.documentElement, 'click', () => {
	if (inPopover.value) return;
	close();
});
</script>

<style scoped lang="scss"></style>
